<!--  -->
<template>
  <div style="height: 1000px">
    <div>
      <el-row class="content" :gutter="20">
        <el-col :span="18">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px; font-weight: bold"
                >热门比赛/考试</span
              >
            </div>
            <el-row :gutter="10">
              <el-col
                :span="8"
                v-for="(v, index) in activities"
                :key="index"
                style="margin-top: 10px"
              >
                <el-card :body-style="{ padding: '0px' }">
                  <!-- 其他图片保持原样 -->
                  <img v-lazy="v.image" class="image" />
                  <div style="padding: 14px">
                    <el-tooltip
                      class="item"
                      effect="light"
                      :content="v.content"
                      placement="top"
                    >
                      <div class="text">{{ v.content }}</div>
                    </el-tooltip>
                    <div style="display: flex">
                      <span class="time">热门： </span>
                      <el-rate
                        class="rate"
                        v-model="v.hot"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}"
                      >
                      </el-rate>
                    </div>
                    <div style="display: flex">
                      <span class="time">难度： </span>
                      <el-rate
                        class="rate"
                        v-model="v.difficulty"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value}"
                      >
                      </el-rate>
                    </div>

                    <div class="bottom clearfix">
                      <time class="time">{{ v.timestamp }}</time>
                      <el-button type="text" class="button" @click="toLink(v)"
                        >前往查看</el-button
                      >
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card></el-col
        >
        <el-col :span="6">
          <el-card shadow="always">
            <div slot="header" class="clearfix">
              <span style="font-size: 20px; font-weight: bold">近期竞赛</span>
            </div>
            <div class="block">
              <el-timeline class="right-box">
                <el-timeline-item
                  timestamp="2025/4 - 2025/5"
                  placement="top"
                  color="#0bbd87"
                >
                  <el-card class="highlight">
                    <h4>第 11 届中国国际大学生创新大赛</h4>
                    <p>“互联网 +” 相关，注重技术创新和商业模式创新。</p>
                  </el-card>
                  <!-- <h4>往届比赛</h4> -->
                </el-timeline-item>
                <el-timeline-item timestamp="2025/4/12" placement="top">
                  <el-card>
                    <h4>第 16 届蓝桥杯全国软件和信息技术专业人才大赛</h4>
                    <p>软件赛包括 C/C++ 程序设计、Java 软件开发、Python 程序设计、Web 应用开发、网络安全等赛项。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2025/7 - 2025/8" placement="top">
                  <el-card>
                    <h4>第 18 届中国大学生计算机设计大赛</h4>
                    <p>需提交完整项目、设计文档、演示视频等。</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="card-footer">
                <span style="font-size: 20px; font-weight: bold"
                  >感兴趣的同学可以在
                </span>
                <span style="font-size: 20px; font-weight: bold; color: blue"
                  >有问必答</span
                >
                <span style="font-size: 20px; font-weight: bold"
                  >里讨论交流</span
                >
              </div>
            </div>
          </el-card></el-col
        >
      </el-row>
    </div>
    <myFooter />
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activities: [
        {
          content:
            "“挑战杯”全国大学生课外学术科技作品竞赛（又称挑战杯，“大挑”）",
          connect: "https://www.tiaozhanbei.net/",
          timestamp: "3-5月份(2年一届-奇数年举办)",
          color: "#0bbd87",
          hot: 5.0,
          difficulty: 5.0,
          image: require("../../assets/img/挑战杯.gif"),
        },

        {
          content:
            "“挑战杯”中国大学生创业计划大赛（暨“创青春”全国大学生创业大赛，又称小挑）",
          connect:
            "https://account.chsi.com.cn/passport/login?service=https://cy.ncss.cn/connect/chsi&locale=zh_CN",
          timestamp: "3-5月(2年一届-偶数年举办)",
          color: "#0bbd87",
          hot: 5.0,
          difficulty: 5.0,
          image: require("../../assets/img/小挑.png"),
        },

        {
          content: "蓝桥杯",
          timestamp: "4-6月份",
          color: "#0bbd87",
          connect: "https://dasai.lanqiao.cn/",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/蓝桥杯2.png"),
        },
        {
          content: "海峡两岸暨港澳地区大学生计算机创新作品赛广东省赛",
          timestamp: "6月份",
          color: "#0bbd87",
          connect: "https://fzs.newoe.cn/",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/海峡2.png"),
        },
        {
          content: "“互联网+”大学生创新创业大赛",
          connect:
            "https://account.chsi.com.cn/passport/login?service=https://cy.ncss.cn/connect/chsi&locale=zh_CN",
          timestamp: "6-9月份",
          color: "#0bbd87",
          hot: 5.0,
          difficulty: 4.0,
          image: require("../../assets/img/小挑.png"),
        },
        {
          content: "中国大学生计算机设计大赛",
          timestamp: "7-8月份",
          color: "#0bbd87",
          connect: "https://www.patest.cn/home",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/程序设计大赛.png"),
        },
        {
          content: "四六级考试",
          timestamp: "6月、12月",
          color: "#0bbd87",
          connect: "https://cet.neea.edu.cn/",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/四六级.jpg"),
        },
        {
          content: "全国大学生软件测试大赛",
          timestamp: "10-12月份",
          color: "#0bbd87",
          connect:
            "https://chinasoft.ccf.org.cn/2023/notice/ruanjianceshi.html",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/软测.png"),
        },
        {
          content: "PAT（计算机程序设计能力考试）",
          timestamp: "12月15日",
          color: "#0bbd87",
          connect: "https://www.patest.cn/home",
          hot: 5.0,
          difficulty: 3.7,
          image: require("../../assets/img/PTA.png"),
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    toLink(v) {
      window.open(v.connect);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.content {
  padding: 20px 10% 10% 10%;
  margin: 0 !important;
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em;
  /* 这个值应该与你的行高相匹配 */
  max-height: 3em;
  /* 行高乘以行数，这里是2行 */
  min-height: 3em;
  /* 行高乘以行数，这里是2行 */
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 93%;
  display: block;
  height: 60px;
  padding: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-footer {
  padding: 10px 20px;
  /* 根据需要调整内边距 */
  text-align: left;
  /* 根据需要调整文本对齐方式 */
  font-size: 20px;
  font-weight: bold;
  border-top: 1px solid #ebeef5;
  /* 添加边框以区分内容区域 */
  margin-left: 10px;
  margin-right: 10px;
}

.right-box {
  padding: 0;
  margin: 0px 0px;
}
</style>
